<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	省份：
	<select id="province" onchange="selectCitys(this)">
	<option>--请选择--</option>
	<option >山东省</option>
	<option>江苏省</option>
	<option>台湾省</option>
	</select>
	城市：
	<select id="city" onchange="selectAreas(this)">
		<option>--请选择--</option>
		<option>济南</option>
		<option>青岛</option>
		<option>烟台</option>
	</select>
	区县：
	<select id="area">
		<option>--请选择--</option>
		<option>市北区</option>
		<option>市南区</option>
		<option>城阳区</option>
	</select>
	<script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
;		<%-- <sctipt>
			$(function(){
				$.post(
					"${pageContext.request.contextPath}/selectArea?method=selectprovince",
					function(data){
						console.log(data);
					}
				),
				"json"
			});
		</sctipt> --%>
	
	<script>
		$(function () {
			$.post(
				"/Java823Web/selectArea?method=selectProvince",//url		
				function(data){
					console.log(data);
					var html="<option>--请选择--</option>";
					for(var i=0;i<data.length;i++) {
						html+="<option value="+data[i].id+">"+data[i].province+"</option>";
					}
					$("#province").html(html);
				},
				"json"
			);
			
		});
		//(obj)??
		function selectCitys(obj) {
			//清空县区下拉框中的内容
			$("#area option:gt(0)").remove();
			var provinceId = $(obj).val();
			
			$.post(
				"/Java823Web/selectArea?method=selectCity",//url		
				{"provinceId":provinceId},
				function(data){
					console.log(data);
					var html="<option>--请选择--</option>";
					for(var i=0;i<data.length;i++) {
						html+="<option value="+data[i].id+">"+data[i].city+"</option>";
					}
					$("#city").html(html);
				
				},
				"json"
			);
		}
		
		function selectAreas(obj){
			var cityId=$(obj).val();
			$.post(
					"/Java823Web/selectArea?method=selectArea",//url		
					{"cityId":cityId},
					function(data){
						console.log(data);
						var html="<option>--请选择--</option>";
						for(var i=0;i<data.length;i++) {
							html+="<option value="+data[i].id+">"+data[i].area+"</option>";
						}
						$("#area").html(html);
					
					},
					"json"
				);
		}
		
		
		
	</script>
	
</body>
</html>